<html>
  <head>
    <meta charset="UTF-8">
    <title>Chat</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <link href="dist/styles/font-awesome.min.css" type="text/css" rel="stylesheet" />
    <link href="dist/styles/main.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
        <div id="waiting"><i class="icon icon-spinner icon-spin"></i><div></div></div>
        <div id="app" style="display:none;">
            <header id="app-header">
                <menu>
                    <li><i class="icon icon-map-pin" aria-hidden="true"></i></li>
                    <li><i class="icon icon-window-maximize" aria-hidden="true"></i></li>
                    <li><i class="icon icon-window-minimize" aria-hidden="true"></i></li>
                    <li><i class="icon icon-window-close" aria-hidden="true"></i></li>
                </menu>
            </header>
            <section id='workarea'>
                
                <nav id='nav'>
                    <header><img id="face" src="images/cl.jpg"/></header>
                    <menu id='top-menu'>
                        <li class="selected"><i class="icon icon-comment" aria-hidden="true"></i></li>
                        <li><i class="icon icon-user" aria-hidden="true"></i></li>
                    </menu>
                </nav>
                <aside id="chats">
                    <header id="search">
                        <span class="search-input"><input type="text" id="keyword" /></span>
                    </header>
                    <ul id="chat-list">
                        <li class="chat">
                            <img class="face" src="images/st.jpg">
                            <figure>
                                <figcaption><span class="name">严一</span><span class="time">2019-10-13</span></figcaption>
                                <div class="chat-summary">说了一些话</div>
                            </figure>
                        </li>
                        <li class="chat selected">
                            <img class="face" src="images/yjs.jpg">
                            <figure>
                                <figcaption><span class="name">寒寒</span><span class="time">2019-10-13</span></figcaption>
                                <div class="chat-summary">说了一些话</div>
                            </figure>
                        </li>
                    </ul>
                </aside>
                <section id="current-chat">
                    <header id="current-chat-caption">
                        <h3 id="current-chat-title">严一与寒寒的对话</h3>
                        <span class="btn more"></span>
                    </header>
                    <ol id="messages">
                        <li class="other">
                            <img class="face" src="images/qx.jpg" />
                            <div class="content">hello</div>
                        </li>
                        <li class="other">
                            <img class="face" src="images/qx.jpg" />
                            <div class="content">在吗</div>
                        </li>
                        <li class="self">
                            <img class="face" src="images/cm.jpg" />
                            <div class="content">爪子？</div>
                        </li>
                    </ol>
                    <footer id="op">
                        <ul id="editor-btns">
                            <li><i class="icon icon-heart-o"></i></li>
                            <li><i class="icon icon-file-o"></i></li>
                        </ul>
                        <textarea id="message-input"></textarea>
                        <footer>
                            <button id="send-btn">发送</button>
                        </footer>
                    </footer>
                </section>
            </section>
            
            <aside id="chat-info"></aside>
        </div>
        
        <div id="login-form" style="display:none;">
            <img src="images/bah.jpg" />
            <div class="username"><input id="username" type="text" placeholder="请输入用户名" /></div>
            <div class="password"><input id="password" type="password" placeholder="请输入密码" /></div>
            <div class="more">
                <input type="checkbox" />记住密码
                <input type="checkbox" />自动登录
            </div>
            <div><button id="login-btn">登录</button></div>
            <div><a href="">注册</a> <a href="">找回密码</a></div>
            
        </div>
        <script type="text/javascript" src="src/jquery.min.js"></script>
        <script type="text/javascript" src="src/app.js"></script>
        <script type="text/javascript" src="src/my.js"></script>
  </body>
</html>